<template>
	<view>
		<view class="top_search"><uni-search-bar :radius="100" @confirm="searchFn"></uni-search-bar></view>
		<view class="list_box">
			<radio-group class="uni-list" @change="radioChange">
				<label class="list_main" v-for="(item, index) in dataList" :key="index" :disabled="item.allocated">
					<view>
						<radio
							:disabled="item.allocated == 1 ? true : false"
							:id="item.realname"
							:value="JSON.stringify({ user_id: item.id, store: item.store, index: index })"
							:checked="item.checked"
						></radio>
					</view>
					<view>
						<label class="label-2-text" :for="item.realname">
							<text>{{ item.realname }}</text>
							<text class="" style="color: red;font-size: 10upx;" v-if="item.allocated == 1 ? true : false">{{ item.allocated == 1 ? ' 已拥有此客资' : '' }}</text>
							<text v-if="item.hotel_text">--{{ item.hotel_text }}</text>
						</label>
					</view>
				</label>
			</radio-group>
		</view>
		<text class="true_btn" @click="submit">确定</text>
		<wzp-picker ref="wzpPicker" :mode="mode" :pickerList="pickerList" :defaultIndex="defaultIndex" @onConfirm="onConfirm"></wzp-picker>
	</view>
</template>

<script>
import wzpPicker from '@/component/wzp-picker/wzpPicker';
import sun from '@/utils/sun.js';
export default {
	components: {
		wzpPicker
	},
	data() {
		return {
			searchValue: '',
			dataList: [],
			radioItems: [
				{
					name: 'USA',
					value: '美国'
				},
				{
					name: 'CHN',
					value: '中国',
					checked: 'true'
				}
			],
			pickerList: [],
			mode: '',
			defaultIndex: [0],
			hotel_id: '',
			options: '',
			user_id: '',
			hotel_text: '',
			index: ''
		};
	},
	onLoad(options) {
		this.options = options;
	},
	methods: {
		searchFn(e) {
			let value = e.value;
			let that = this;
			sun.request({
				url: '/h5/ucenter.Usercenter/getUserByName',
				showLoading: true,
				token: true,
				data: {
					allocate_id: that.options.id,
					realname: value
				},
				success(res) {
					if (res.code == 200) {
						that.dataList = res.data.list;
					}
				},
				fail(e) {
					uni.showToast({
						icon: 'none',
						title: '服务器开小差去啦~'
					});
				}
			});
		},

		radioChange(e) {
			this.user_id = JSON.parse(e.detail.value).user_id;
			this.index = JSON.parse(e.detail.value).index;
			if (JSON.parse(e.detail.value).store.length >= 1) {
				this.mode = 'one';
				this.defaultIndex = [0];
				this.pickerList = JSON.parse(e.detail.value).store;
				this.$refs.wzpPicker.showPicker();
			} else {
				this.hotel_id = '';
			}
		},
		onConfirm(e) {
			this.hotel_id = this.pickerList[e[0]].id;
			this.dataList[this.index].hotel_text = this.pickerList[e[0]].title;
			this.$forceUpdate();
		},
		submit() {
			let that = this;
			sun.request({
				url: '/h5/customer.customer/distribute',
				showLoading: false,
				token: true,
				data: {
					user_id: [that.user_id],
					hotel_id: that.hotel_id,
					allocate_id: that.options.id
				},
				success(res) {
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: res.msg,
							duration: 1000
						});
						setTimeout(function() {
							uni.navigateBack({
								animationType: 'pop-out',
								animationDuration: 300
							});
						}, 1000);
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				},
				fail(e) {
					uni.showToast({
						icon: 'none',
						title: '服务器开小差去啦~'
					});
				}
			});
		}
	}
};
</script>

<style lang="less">
page {
	padding: 0;
	background-color: #f4f4f4;
}
.top_search {
	width: 100%;
	display: flex;
	justify-content: center;
	background-color: #ffffff;
}
.list_box {
	width: 100%;
	padding: 30upx 0upx;
	box-sizing: border-box;
	.list_main {
		padding: 20upx 30upx;
		border-bottom: 1upx solid #f4f4f4;
		background-color: #ffffff;
		display: flex;
		justify-content: left;
	}
}
.true_btn {
	position: fixed;
	right: 40upx;
	bottom: 40upx;
	padding: 15upx 25upx;
	background: #007aff;
	color: #ffffff;
	border-radius: 20upx;
	font-size: 25upx;
}
</style>
